import { View } from '@tarojs/components';
import { CDataListCustom, CBlockCustom, CCardStatusInfoCustom } from '@vh-mobile/pro-components';

export default () => {
  const loadData: any = [1, 2, 3, 4, 5];
  const loadData1 = Array(100)
    .fill(0)
    .map((_, i) => {
      const index = i + 1;
      return {
        id: index,
        viewRoomNo: `${index}标题`,
        statusName: `${index}状态`,
        buildingArea: `${index * 100}`,
        standardTotalPrice: `${index * 1000}`,
      };
    });
  return (
    <View style={{ minHeight: '100vh', backgroundColor: '#f7f7f7' }}>
      <CBlockCustom title="普通数据列表">
        <View style={{ backgroundColor: '#fff' }}>
          <CDataListCustom dataSources={loadData}>
            {loadData.map((i: any) => {
              return (
                <View
                  style={{ width: '100%', height: '40px', lineHeight: '40px', textAlign: 'center' }}
                  key={i}
                >
                  列表{i}
                </View>
              );
            })}
          </CDataListCustom>
        </View>
      </CBlockCustom>
      <CBlockCustom title="虚拟滚动数据列表">
        <View style={{ backgroundColor: '#fff' }}>
          <CDataListCustom
            className="virtual-list"
            dataSources={loadData1}
            enableVirtualList={true}
            // virtualListProps={{ itemSize: 100, unlimitedSize: true, enhanced: true }}
            virtualListProps={{ itemSize: 100, height: 300, overscanCount: 50, enhanced: true }}
            virtualListItem={({ id, index, style, data }: any) => {
              const house = data[index];
              return (
                <View id={id} className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} style={style}>
                  <CCardStatusInfoCustom
                    className="status-click"
                    key={house.id}
                    data={house}
                    // onClick={onClick}
                    columnsNum={1}
                    fieldObj={{
                      title: {
                        value: 'viewRoomNo',
                      },
                      status: {
                        value: 'statusName',
                      },
                      columns: [
                        {
                          label: '建筑面积',
                          value: (d: any) => {
                            return `${d.buildingArea}㎡`;
                          },
                        },
                        {
                          label: '标准总价',
                          value: (d: any) => {
                            return `${d.standardTotalPrice}元`;
                          },
                        },
                      ],
                    }}
                  />
                </View>
              );
            }}
          />
        </View>
      </CBlockCustom>
      <CBlockCustom title="无数据">
        <View style={{ backgroundColor: '#fff' }}>
          <CDataListCustom dataSources={[]}>
            {[].map((i: any) => {
              return (
                <View
                  style={{ width: '100%', height: '40px', lineHeight: '40px', textAlign: 'center' }}
                  key={i}
                >
                  列表{i}
                </View>
              );
            })}
          </CDataListCustom>
        </View>
      </CBlockCustom>
    </View>
  );
};
